<script setup lang="ts">
defineOptions({
  name: "search",
});

const search = ref("");
const searchInput = ref();
const activeButton = ref("product"); // 默认选中“产品”按钮

onMounted(() => {
  nextTick(() => {
    searchInput.value?.focus();
  });
});
</script>

<template>
  <div class="flex-1 flex items-end justify-between">
    <div class="search__wrapper mt-7">
      <el-button
        :type="activeButton === 'product' ? 'primary' : ''"
        @click="activeButton = 'product'"
      >
        产品
      </el-button>
      <el-button
        :type="activeButton === 'company' ? 'primary' : ''"
        @click="activeButton = 'company'"
      >
        企业
      </el-button>

      <div class="flex items-center mt-4">
        <el-input
          ref="searchInput"
          v-model="search"
          size="large"
          style="width: 1000px"
          placeholder="请输入产品名、型号、货号、品牌等"
        ></el-input>
        <el-button type="primary" size="large" class="btn">搜索</el-button>
      </div>
    </div>
    <el-button type="primary" size="large">发布需求</el-button>
    <el-button type="success" size="large">客服协助</el-button>
  </div>
</template>

<style lang="scss" scoped>
.search__wrapper {
  :deep(.el-input__wrapper) {
    border-radius: 4px 0 0 4px;
  }
  .btn {
    border-radius: 0 4px 4px 0;
    padding: 0 30px 0 30px;
  }
}
</style>
